import { useState } from 'react';
import store from './redux/store';
import {
  createIncrementAction,
  createDecrementAction,
} from './redux/countAction';

function App() {
  const [step, setStep] = useState(1);
  const [, setObj] = useState({}); // 用于强制刷新

  const increment = () => {
    store.dispatch(createIncrementAction(step * 1));
  };
  const decrement = () => {
    store.dispatch(createDecrementAction(step * 1));
  };

  // 状态改变时强制刷新
  store.subscribe(() => {
    setObj({});
  });

  return (
    <>
      <div>
        <h1>Count: {store.getState()}</h1>
        step:{' '}
        <input
          type="number"
          value={step}
          step={1}
          onChange={e => setStep(e.target.value)}
        />
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    </>
  );
}

export default App;
